.ThemeConfigItem {
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &>div {
        height: 100%;

        &.Left {
            width: 160px;
            padding-right: 16px;
            border-right: 1px dashed rgba(145, 158, 171, 0.2);
            position: relative;
            z-index: 1;

            &>.Nav {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: 48px;
                font-family: ShuHeiTi;
                font-weight: 600;
                font-size: 16px;
                color: #949494;
                cursor: pointer;
                transition: all 0.35s;
                position: relative;
                z-index: 1;

                &.active {
                    color: #262626;
                }
            }

            &>.indicator {
                position: absolute;
                z-index: 1;
                width: 4px;
                top: 12px;
                right: 6px;
                height: 24px;
                border-radius: 50px;
                transition: all 0.35s;
            }
        }

        &.Right {
            flex: 1;
            padding-left: 16px;
            overflow: hidden;

            .Label {
                position: relative;
                z-index: 1;
                margin-top: 16px;

                &>div:first-child {
                    position: absolute;
                    z-index: 2;
                    left: 8px;
                    top: -12px;
                    padding: 2px 4px;
                    border-radius: 4px;
                    font-family: ShuHeiTi;
                    font-size: 16px;
                    font-weight: bold;
                    color: #262626;
                    background: rgba(255, 255, 255, 0.15);
                    backdrop-filter: blur(8px);
                }

                &>*:last-child {
                    width: 100%;
                    height: 64px;

                    .ant-input-number,
                    .ant-picker,
                    .ant-color-picker-trigger,
                    .ant-color-picker-clear::after {
                        width: 100%;
                    }

                    .ant-input-affix-wrapper,
                    .ant-input-outlined,
                    .ant-select-single,
                    .ant-input-number-input,
                    .ant-picker,
                    .ant-color-picker-trigger {
                        height: 64px;
                    }


                    .ant-color-picker-color-block,
                    .ant-color-picker-clear {
                        width: 100%;
                        height: 100%;
                    }

                    .ant-form-item-row {
                        position: relative;
                        z-index: 1;
                    }

                    input,
                    textarea,
                    .ant-select-selector,
                    .ant-picker-suffix,
                    .ant-input-suffix,
                    .ant-select-arrow {
                        font-size: 20px;
                    }
                }
            }

            &>.swiper {
                width: 100%;
                height: 100%;
                overflow: hidden;

                .swiper-slide {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    background: #f9f9f9;

                    &>.SetThemeConfig {
                        width: 100%;
                        height: 100%;
                        padding: 16px;

                        &>.ThemeBox {
                            width: 100%;
                            height: 100%;
                            border-radius: 8px;
                            overflow: hidden;
                            box-shadow: var(--shadow-1-down);
                            display: flex;
                            align-items: flex-start;
                            justify-content: flex-start;
                            position: relative;
                            z-index: 1;

                            &>.ImageBack {
                                position: absolute;
                                z-index: -2;
                                width: 100%;
                                height: 100%;
                            }

                            &>.BackMask {
                                position: absolute;
                                z-index: -1;
                                width: 100%;
                                height: 100%;
                            }

                            &>.Options {
                                width: 240px;
                                padding: 16px;
                            }

                            &>.Ground {
                                position: absolute;
                                z-index: 1;
                                top: 16px;
                                right: 16px;
                                width: 240px;
                            }

                            &>.SaveButton {
                                position: absolute;
                                z-index: 1;
                                left: 0;
                                bottom: 32px;
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                &>button {
                                    width: 240px;
                                    box-shadow: var(--shadow-1-down);
                                }
                            }


                        }
                    }

                    &>.SetHeadConfig {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        flex-direction: column;
                        position: relative;
                        z-index: 1;

                        &>.simulation {
                            width: calc(100% - 16px);
                            height: 64px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            border-radius: 4px;
                            margin: 8px 8px 16px 8px;
                            box-shadow: var(--shadow-1-down);

                            &>div:first-child {
                                flex: 1;
                                padding: 0 16px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                &>div:first-child {
                                    font-size: 24px;
                                    color: #262626;
                                    margin-right: 16px;
                                    cursor: pointer;
                                    text-shadow: 0 0 8px white;
                                }

                                &>div:last-child {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    span {
                                        font-size: 24px;
                                        color: #262626;
                                        margin-right: 16px;
                                        cursor: pointer;
                                    }
                                }
                            }

                            &>span {
                                margin: 0 16px;
                                cursor: pointer;
                            }
                        }

                        &>.options {
                            width: 100%;
                            padding: 0 8px;
                            overflow-y: scroll;

                            &::-webkit-scrollbar {
                                display: none;
                            }

                            &>div {
                                width: 100%;

                                &:first-child {
                                    border-bottom: 1px dashed rgba(145, 158, 171, 0.2);
                                }

                                &>.Title {
                                    font-size: 20px;
                                    color: #262626;
                                    margin-right: 16px;
                                    font-family: ShuHeiTi;
                                    margin: 8px 0;
                                }

                                &>.FunctionBar {
                                    margin-bottom: 8px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: flex-start;
                                    flex-wrap: wrap;

                                    &>.ant-tag {
                                        font-size: 16px;
                                        padding: 4px 8px;
                                    }
                                }

                                &>.UserAvatar {
                                    &>div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: flex-start;
                                        height: 48px;

                                        &>div:first-child {
                                            font-size: 16px;
                                            color: #262626;
                                            margin-right: 16px;
                                            font-family: ShuHeiTi;
                                            margin-right: 8px;
                                        }
                                    }
                                }


                            }


                        }

                        &>.OnSave {
                            position: absolute;
                            left: 0;
                            bottom: 16px;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &>button {
                                width: 240px;
                                box-shadow: var(--shadow-1-down);
                            }
                        }
                    }

                    &>.SetMenuConfig {
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;

                        &>div {
                            height: 100%;

                            &.MenuLook {
                                width: 240px;
                                height: 100%;
                                margin-right: 16px;
                                padding: 16px;
                                position: relative;
                                z-index: 1;

                                &>.Mask {
                                    position: absolute;
                                    z-index: -1;
                                    left: 16px;
                                    top: 16px;
                                    border-radius: 8px;
                                    width: calc(100% - 32px);
                                    height: calc(100% - 32px);
                                }

                                &>.ant-menu {
                                    font-size: calc(var(--fontSize) * 1px);
                                    font-family: var(--fontFamily);

                                    .anticon {
                                        font-size: calc(var(--iconSize) * 1px);
                                    }

                                    .ant-menu-item {
                                        color: var(--itemColor);
                                        height: calc(var(--itemHeight) * 1px);
                                        border-radius: calc(var(--itemBorderRadius) * 1px);

                                        &:hover {
                                            background: var(--itemActiveBg);
                                        }
                                    }

                                    .ant-menu-title-content {
                                        margin-inline-start: calc(var(--iconMarginInlineEnd) * 1px)
                                    }

                                    .ant-menu-item-selected {
                                        background: var(--itemSelectedBg);
                                        color: var(--itemSelectedColor);
                                    }
                                }
                            }

                            &.Options {
                                flex: 1;
                                overflow-y: scroll;

                                &::-webkit-scrollbar {
                                    display: noen;
                                }

                                &>.Title {
                                    font-size: 20px;
                                    color: #262626;
                                    margin-right: 16px;
                                    font-family: ShuHeiTi;
                                    margin: 8px 0;
                                }

                                &>.FormItem {
                                    width: 100%;
                                    display: flex;
                                    align-items: flex-start;
                                    justify-content: flex-start;
                                    align-content: flex-start;
                                    flex-wrap: wrap;

                                    &>.Label {
                                        width: 45%;
                                        margin-right: 4%;
                                        margin-bottom: 8px;
                                    }
                                }

                                &>.OnSave {
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 16px 0;

                                    &>button {
                                        width: 240px;
                                    }
                                }


                            }
                        }
                    }

                    &>.SetBodyConfig {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &>div {
                            height: 100%;

                            &.BodyLook {
                                width: 320px;
                                margin-right: 16px;

                                &>.ant-tabs {
                                    height: 100%;

                                    .ant-tabs-nav {
                                        margin: 0;
                                    }

                                    .ant-tabs-content-holder {
                                        background: var(--background);
                                        backdrop-filter: blur(calc(var(--backdropFilter) * 1px));
                                        padding: calc(var(--padding) * 1px);
                                        border-radius: 0 0 calc(var(--borderRadius) * 1px) calc(var(--borderRadius) * 1px);
                                    }
                                }
                            }

                            &.Options {
                                flex: 1;
                                overflow-y: scroll;

                                &::-webkit-scrollbar {
                                    display: noen;
                                }

                                &>.Title {
                                    font-size: 20px;
                                    color: #262626;
                                    margin-right: 16px;
                                    font-family: ShuHeiTi;
                                    margin: 8px 0;
                                }

                                &>.FormItem {
                                    width: 100%;
                                    display: flex;
                                    align-items: flex-start;
                                    justify-content: flex-start;
                                    align-content: flex-start;
                                    flex-wrap: wrap;

                                    &>.Label {
                                        width: 45%;
                                        margin-right: 4%;
                                        margin-bottom: 8px;
                                    }
                                }

                                &>.OnSave {
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 16px 0;

                                    &>button {
                                        width: 240px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}